<template>
    <div class="pt44">
        <section>
            <div id="barcodeBoxParent">
                <div class="barcodeBox">
                    <img id="barcode"/>
                </div>

            </div>
            <div id="containerQrCode"></div>
            <img id="img-photo" v-bind:src="this.$store.state.imagesUrl + 'photo.png'">
            <p class="countdown-parent">有效时间<span id="countdown">120</span>秒</p>
            <div id="tishiRefresh" @click="refrechOrderId">
                <img v-bind:src="this.$store.state.imagesUrl + 'qrcodeRefresh.png'">
                <p>
                    <span>二维码已失效，请点图片击刷新。</span>
                </p>
            </div>
        </section>
    </div>
</template>

<script>
var smxljb; // 扫码轮询句柄
var sihadle;
function setContainerQrCodeCss () {
    var innerWidth = window.innerWidth > 400 ? 400 : window.innerWidth;
    $("section").css({
        "width": innerWidth * 0.9 + "px",
        "height": (innerWidth * 1.05 + 10) + "px"
    });
    $("#tishiRefresh").css({
        "height": (innerWidth * 1.05 - 20) + "px"
    });
    $("#containerQrCode").css({
        "width": innerWidth * 1.2 + "px",
        "height": innerWidth * 1.2 + "px",
        "margin-top": (0 - innerWidth) * 0.25 + "px",
        "margin-left": (0 - innerWidth) * 0.15 + "px"
    });
    $(".countdown-parent").css("margin-top", innerWidth * 0.65 + "px");
}
// 更新二维码
function updateQrCode(payCode) {
    var innerWidth = window.innerWidth > 400 ? 400 : window.innerWidth;
    var outerSize = innerWidth * 1.2;
    var options = {
        render: "canvas",
        ecLevel: "L",
        minVersion: 3,

        fill: "#000000",
        //        background: "#ffffff",
//        fill: $('#img-photo')[0],

        text: payCode,
        size: outerSize,
        radius: 0.1,
        quiet: 1,

        mode: 4,

        mSize: 0.13,
        //        mPosX: 0.5,
        //        mPosY: 0.5,

        //        label: "tonglianzhifu",
        fontname: "Ubuntu",
        fontcolor: "#333333",
        //        src:"./images/photo.png"
        image: $('#img-photo')[0]
    };

    $('#containerQrCode').empty().qrcode(options);
//    var countdownValue = 120;
    if(sessionStorage.getItem("countdownValue")){
        var countdownValue = sessionStorage.getItem("countdownValue");
    }else{
        var countdownValue = 120;
    }
    var lastTime = new Date().getTime();
    sihadle = setInterval(function() {
        var nowTime = new Date().getTime();
        var cTimes = Math.floor((nowTime - lastTime) / 1000);
        countdownValue = 120 - cTimes;
        if (countdownValue < 0) {
            countdownValue = 0;
        }
        $("#countdown").text(countdownValue);
        if (countdownValue == 0) {
            $("#tishiRefresh").show();
            clearInterval(sihadle);
            clearInterval(smxljb);
//            clearInterval(searchStatusHandle);
        }
//        sessionStorage.setItem("countdownValue",countdownValue);
    }, 1000);
}

// 创建条形码
function createJsBarcod(payCode) {
    JsBarcode('#barcode', payCode, {
            width: 3,
            height: innerWidth * 0.3,
            format: "CODE128",
            displayValue: true,
            //        fontOptions: "bold",
            fontOptions: "",
            font: "Helvetica",
            //        fontSize: 20,
            textAlign: "center",
            textMargin: 3,
            fontSize: 30
        });
}
export default  {
    name: 'Qrcodepay',  // 组件名称
    data () {  // 数据
        return {
          msg: 'qrcodepay',
          payCode:"0938334233233"
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        refrechOrderId(){
            clearInterval(smxljb);
            var _this = this;
            var rcParamates = {
                prdtNo:       this.$store.state.prdtNo, //产品号
                channelNo:    this.$store.state.channelNo, //产品渠道
                serialNo:     this.$store.state.payCode, //串号
                creditCardNo: this.$store.state.cardId,  //信用卡号
                servlet_type:"recreate_order"
            };
            $.post(XtsdOrderServlet, rcParamates, function(rcdata){
                console.dir(rcdata);
                if(rcdata.xtsd_OrderInfo_response && rcdata.xtsd_OrderInfo_response.respCode == "0000"){
                    _this.$store.state.payCode = rcdata.xtsd_OrderInfo_response.serialNo;
                    createJsBarcod(_this.$store.state.payCode);
                    updateQrCode(_this.$store.state.payCode);
                    $("#tishiRefresh").hide();
                    smxljb = setInterval(function() {
                        _this.resultPolling();
                    },2000);
                }else if(rcdata.xtsd_OrderInfo_response && rcdata.xtsd_OrderInfo_response.respMsg){
                    _this.$store.state.errorMsg = rcdata.xtsd_OrderInfo_response.respMsg;
                }else{
                    _this.$store.state.errorMsg = "刷新付款码失败";
                }
            })


        },
        resultPolling(){  // 消费结果轮询接口
            var rparaments = {
                open_id:this.$store.state.openid,
                serial_no:this.$store.state.payCode
            }
            var _this = this;
            $.post(XtsdSearchOrderServlet, rparaments, function(rpdata) {
                console.dir(rpdata)
                if(rpdata.error_response && rpdata.error_response.status !="01"){
                    if(rpdata.error_response.status=="02"){
                        _this.$store.state.resultCode = "1";
                    }else{
                        _this.$store.state.resultCode = "2";
                        _this.$store.state.result_msg2 = "";
                        if(rpdata.error_response.nt){
                            _this.$store.state.result_msg2 = rpdata.error_response.nt;
                        }

                    }
                    location.hash = "#/result"
                }

            })
        }
    },
    mounted:function  () {
        console.log("beforeMount.........")
        createJsBarcod(this.$store.state.payCode);
        setContainerQrCodeCss();
        var _this = this;
        setTimeout(function  () {
            updateQrCode(_this.$store.state.payCode);
            smxljb = setInterval(function  () {
                _this.resultPolling();
            },2000);
        },300);



//        parent.html(barcodeBox);
    },
    beforeRouteEnter:function  (to,from,next) {
        if(from.name == "Result"){
            location.hash = "#/loanRecord";
        }else{
            next();
        }
    },

    beforeRouteLeave:function(to,from,next) {

        console.log("beforeRouteLeave....")
        clearInterval(sihadle);
        clearInterval(smxljb);
        if(to.name == "Info"){
            if(this.$store.state.channelNo == "01"){
                location.hash="#/loanRecord";
           }else{
                location.hash="#/accountRecord";
           }
        }else{
            next();
        }

    }
}
</script>

<style lang='scss' scoped>
#containerQrCode {
    //        background: url(../images/photo.png) no-repeat;
    background-position: center;
    //        background-size: 74px;
    position: absolute;
    -moz-transform: scale(0.5, 0.5);
    -webkit-transform: scale(0.5, 0.5);
    -o-transform: scale(0.5, 0.5);
}
section{
    width: 281px;
    text-align: center;
    background: #fff;
    margin: 26px auto;
    border-radius: 10px;
   .barcodeBox img {
        width: 280px;
        margin-top: 20px;
    }
    #img-photo {
        display: none;
    }
    .countdown-parent {
        font-size: 15px;
        color: #999999;
        padding-bottom: 10px;
        background: #fff;
    }
}
#tishiRefresh{
    position: absolute;
    text-align: center;
    z-index: 98;
    top: 44px;
    left: 0px;
    width: 100%;
    height: 80%;
    background: #efefef;
    padding-top: 80px;
    display: none;
    >img{
        width: 80%;
        max-width: 400px;
    }
}

</style>
